<!-- 通知列表 -->
<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { fetchNoticesAPI } from '@/apis/fetchNotices'
import { useUserInfoStore } from '@/store/userInfo'
import router from '@/router'

const userInfoStore = useUserInfoStore()

// 分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore } = useLoadMore<LoadMoreData<Notice>>(
  fetchNotices,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

onReachBottom(() => loadMore())

/**
 * @description 分页服务函数
 */
async function fetchNotices(d?: LoadMoreData<Notice>): Promise<LoadMoreData<Notice>> {
  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  const res = await fetchNoticesAPI({
    page: _page.toString(),
    limit: '10',
  }, userInfoStore.userInfo!.token!)

  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}

/**
 * @description 点击通知时触发
 */
function handleTapNotice(id: string) {
  router.push({
    name: 'noticeDetail',
    params: { id },
  })
}
</script>

<template>
  <Spacer height="20" />
  <uv-list :custom-style="{ background: 'transparent' }">
    <uv-list-item v-for="notice in dataList" :key="notice.id" :custom-style="{ borderRadius: '20rpx', marginBottom: '20rpx' }">
      <view class="flex items-center justify-between rounded-20rpx bg-white p-40rpx card-shadow" @tap="handleTapNotice(notice.id.toString())">
        <view>
          <view class="text-32rpx text-black font-medium leading-45rpx">
            {{ notice.title }}
          </view>
          <Spacer height="10" />
          <view class="h-80rpx overflow-hidden text-ellipsis text-26rpx text-#333333 leading-40rpx">
            {{ notice.introduce }}
          </view>
          <Spacer height="12" />
          <view class="text-24rpx text-#333333 leading-32rpx">
            发布时间：{{ notice.create_time }}
          </view>
        </view>
        <Spacer width="24" />
        <image class="h-24rpx w-16rpx flex-shrink-0" src="@/static/images/profile/cheveron_right.png" />
      </view>
    </uv-list-item>
    <!-- 加载更多 -->
    <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
  </uv-list>
  <PageDefault v-if="dataList.length === 0">
    暂无通知
  </PageDefault>
  <uv-loading-page :loading="loading && !loadingMore" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
  <Spacer height="240" />
</template>

<route lang="yaml">
name: 'notices'
style:
  navigationBarTitleText: '通知'
  onReachBottomDistance: 100
</route>
